<template>
	<view class="userInfo">
		<u-popup :show="show" @close="close" @open="open" zIndex="10070">
			<view class="userInfo-box">
				<view class="tit flow-flex-start-center">
					<image :src="configDetail ? configDetail.logo : ''" mode=""></image>
					<view class="name">{{configDetail ? configDetail.name : ''}}<text>申请</text></view>
				</view>
				<view class="dec">获取您的昵称、头像</view>
				<view class="userInfo-form">
					<view class="userInfo-lis  userInfo-lis-image flow-flex-start-center bottom-border">
						<view class="name">头像</view>
						<button class="img" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="img" :src="avatar ? avatar :'/static/icon/head.png'" mode=""></image>
						</button>
					</view>
					<view class="userInfo-lis flow-flex-start-center bottom-border">
						<view class="name">昵称</view>
						<input  type="nickname" @blur="nicknameInput" v-model="nickname"  placeholder="点击填写" placeholder-class="placeholder-input" maxlength="15">
					</view>
				</view>
				<view class="change-btn" @click="getRandom">随机头像昵称</view>
				<view class="agree-btn">
					<view class="btn-lis active flow-center" @click="savBtn">允许</view>
					<view class="btn-lis flow-center" @click="show = false">拒绝</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['configDetail']), // vuex获取用户数据
		},
		data() {
			return {
				show:false,
				avatar: this.avatars,
				nickname: this.nicknames,
			}
		},
		props:{
			avatars:{
				type:[Number, String, Object],
				default:''
			},
			nicknames:{
				type:[Number, String, Object],
				default:''
			},
		},
		mounted(options) {
			
		},
		methods: {
			open() {
			  this.show = true
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			// 获取微信头像
			onChooseAvatar(e) {
				const { avatarUrl } = e.detail
				this.$H.upload(avatarUrl).then(res=>{
					this.avatar = res.fullurl;
				})
			},
			// 获取随机头像昵称
			getRandom(){
				this.$H.get('api/user/getRandom', {}).then(res => {
					this.avatar = res.avatar;
					this.nickname =  res.nickname;
				});
			},
			/**
			 * 监听输入
			 */
			nicknameInput: function(res) {
				let that = this;
				let val = res.detail.value;
				if (!val) {
					uni.showToast({
						title:'请输入昵称',
						icon:'none'
						
					})
					return;
				}
				this.nickname = val;
			},
			// 保存用户信息
			savBtn: function(res) {
				let parmes = {
					nickname:this.nickname,
					avatar:this.avatar,
				}
				this.$H.post('api/user/profile', parmes).then(res => {
					uni.$emit('userInfo',parmes)
					this.show = false
				});
			},
			// 打开页面
			openPage(url){
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style>
	.u-popup__content {
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.userInfo-box{
		height: 820rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 40rpx 48rpx 0;
		box-sizing: border-box;
		.tit{
			image{
				display: block;
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
			.name{
				font-size: 32rpx;
				color: #333333;
				text{
					display: inline-block;
					font-size: 32rpx;
					color: #333333;
					margin-left: 24rpx;
				}
			}
		}
		.dec{
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 26rpx;
		}
		.userInfo-form{
			padding-top: 30rpx;
			.userInfo-lis{
				height: 130rpx;
				.name{
					width: 94rpx;
					font-size: 32rpx;
					color: #333333;
				}
				.img{
					width: 88rpx;
					height: 88rpx;
					margin: 0;
					position: relative;
					z-index: 999999;
				}
				image{
					display: block;
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
				input{
					height: 130rpx;
				}
			}
			.userInfo-lis-image{
				background: url("@/static/icon/arr.png") no-repeat right center;
				background-size: 28rpx;
			}
		}
		.change-btn{
			display: inline-block;
			line-height: 130rpx;
			font-size: 28rpx;
			color: #595B73;
			margin-bottom: 20rpx;
		}
		.agree-btn{
			.btn-lis{
				margin-bottom: 24rpx;
				width: 654rpx;
				height: 83rpx;
				background: #FFFFFF;
				font-size: 34rpx;
				color: #0D1625;
			}
			.active{
				background: #F4F6FF;
				border-radius: 10rpx;
				color: #0E54A4;
			}
		}
	}
</style>
